<template>
  <el-popover placement="bottom" trigger="click" width="auto" @hide="changeIcon" @show="changeIcon">
    <template #reference>
      <el-select ref="select" v-model="selectModel" :placeholder="placeholder" clearable
                 multiple popper-style="display: none !important;" readonly>
        <el-option v-for="item in selectModel" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </template>
    <div :style="{width: width + 'px'}">
      <jeesdp-table ref="table" :data="data" :fields="fields" :loading="false" :options="{}" :page="page"
                    @select="onSelect"/>
    </div>
  </el-popover>
</template>

<script lang="js" setup>
import {onMounted, reactive, ref} from "vue";

defineOptions({
  name: "TableSelect"
});

const props = defineProps({
  placeholder: {
    type: String,
    default: '请选择'
  },
  rowKey: {
    type: String,
    default: 'id'
  },
  showValue: {
    type: String,
    default: 'label'
  }
});

const flag = ref(true);
const page = reactive({
  total: 400,
  pageNum: 1,
  pageSize: 10,
  currentChange(current) {
    console.log(current);
  },
  sizeChange(size) {
    console.log(size);
  },
});
const width = ref(0);

const select = ref();
const model = defineModel();
const selectModel = ref([]);
const onSelect = (selection, row) => {
  if (row) {
    if (!selection.includes(row)) {
      model.value.splice(model.value.indexOf(row), 1);
    } else {
      if (model.value) {
        model.value.push(row);
      } else {
        model.value = [row];
      }
    }
    selectModel.value = model.value.map((item) => {
      return {
        value: item[props.rowKey],
        label: item[props.showValue]
      };
    })
  }
}

onMounted(() => {
  width.value = select.value.$el.offsetWidth - 24;
})

const data = [{
  id: '1',
  name: 'name',
  label: '名称',
}, {
  id: '2',
  name: 'name',
  label: '名称1',
}, {
  id: '3',
  name: 'name',
  label: '名称2',
}, {
  id: '4',
  name: 'name',
  label: '名称3',
}, {
  id: '5',
  name: 'name',
  label: '名称4',
}, {
  id: '6',
  name: 'name',
  label: '名称43',
}, {
  id: '7',
  name: 'name',
  label: '名称',
}, {
  id: '8',
  name: 'name',
  label: '名称',
}, {
  id: '9',
  name: 'name',
  label: '名称',
}];

const fields = [{
  prop: 'name',
  label: "名称",

}, {
  prop: 'label',
  label: "展示名称",
}, {
  prop: 'type',
  label: "类型",
}, {
  prop: 'length',
  label: "长度",
}, {
  prop: 'accuracy',
  label: "精度",
}, {
  prop: 'defaultValue',
  label: "默认值",
  width: 200,
}, {
  prop: 'updateVaule',
  label: "更新值",
  width: 200,
}, {
  prop: 'remark',
  label: "备注",
}, {
  prop: 'autoCreate',
  label: "默认创建",
}, {
  prop: 'isNull',
  label: "为空",
},]

const changeIcon = () => {
  console.log('changeIcon');
  flag.value = !flag.value;
}

</script>

<style scoped>
</style>
